<template>
	<view class="technician-collect">
		<!-- 导航栏 -->
		<nav-bar backUrl="/pages/my/my" :isTabbar="true"></nav-bar>	
		<view class="technician-list">
			<view class="technician-item" v-for="(tech, index) in technicianList" :key="index" @tap="viewTechnicianDetail(tech.id)">
				<!-- 技师头像 -->
				<view class="avatar-container">
					<image class="avatar" :src= "tech.avatar || '/static/images/default-avatar.png'" mode="aspectFill"></image>
				</view>
				
				<!-- 技师信息 -->
				<view class="info-container">
					<!-- 技师名称和收藏按钮 -->
					<view class="header">
						<text class="name">{{ tech.name }}</text>
						<view class="button-group">
							<view class="collect-btn" @tap.stop="viewTechnician(tech.id)">
								<text>点击预约</text>
							</view>
							<view class="uncollect-btn" @tap.stop="handleUncollect(tech)">
								<text>取消收藏</text>
							</view>
						</view>
					</view>
					
					<!-- 门店信息 -->
					<view class="store-info">
						<text>所属门店：{{ tech.storeName }}</text>
					</view>
					
					<!-- 综合评分 -->
					<view class="rating">
						<text>综合评分：</text>
						<view class="stars">
							<text class="star">{{tech.rating}}★</text>
						</view>
					</view>
					
					<!-- 技能标签 -->
					<view class="tags">
						<view class="tag" v-for="(category, index) in tech.categories" :key="index">{{ category.categoryName }}</view>
					</view>
				</view>
			</view>
			
			<!-- 无数据提示 -->
			<view class="no-data" v-if="technicianList.length === 0">
				<text>暂无收藏的技师</text>
			</view>
		</view>
	</view>
</template>

<script>
import NavBar from '@/components/nav-bar/nav-bar.vue'
export default {
	components: {
		NavBar
	},
	data() {
		return {
			technicianList: []
		}
	},
	
	onLoad() {
		this.loadCollectedTechnicians()
	},
	
	methods: {
		// 加载收藏的技师列表
		loadCollectedTechnicians() {
			// 获取用户信息
			const userInfoStr = uni.getStorageSync('userInfo')
			let userInfo = null
			
			if (userInfoStr) {
			  try {
			    // 如果是字符串，尝试解析
			    if (typeof userInfoStr === 'string') {
			      const parsed = JSON.parse(userInfoStr)
			      // 检查是否是登录响应格式
			      if (parsed.code === 200 && parsed.data) {
			        userInfo = parsed.data
			      } else {
			        userInfo = parsed
			      }
			    } else {
			      // 如果不是字符串，直接使用
			      userInfo = userInfoStr
			    }
			  } catch (e) {
			    console.error('解析用户信息失败', e)
			    // 解析失败时，尝试直接使用
			    userInfo = userInfoStr
			  }
			}
			
			uni.request({
				url: `${uni.$config.baseUrl}/technician/technician/listAllByUserId`,
				method: 'GET',
				data: {
					id: userInfo.memberId
				},
				success: (res) => {
					if (res.statusCode === 200 && res.data && res.data.code === 200) {
						this.technicianList = (res.data.rows || []).map(tech => ({
							id: tech.id,
							name: tech.name || '未知技师',
							avatar: tech.avatar,
							storeName: tech.storeName || '丰台店',
							experience: tech.experience || '10年+',
							rating: tech.score || 5,
							categories: tech.categories || []
						}))
					} else {
						uni.showToast({
							title: res.data.msg || '获取收藏列表失败',
							icon: 'none'
						})
					}
				},
				fail: (err) => {
					console.error('获取收藏列表失败:', err)
					uni.showToast({
						title: '网络请求失败',
						icon: 'none'
					})
				}
			})
		},
		
		// 查看技师详情
		viewTechnicianDetail(techId) {
			uni.navigateTo({
				url: `/pages/technician-detail/technician-detail?id=${techId}`
			})
		},
		
		// 查看技师详情
		viewTechnician(techId) {
			uni.navigateTo({
				url: `/pages/tech-detail/tech-detail?techId=${techId}`
			})
		},
		
		// 取消收藏
		handleUncollect(tech) {
			const userInfoStr = uni.getStorageSync('userInfo')
			let userInfo = null
			
			if (userInfoStr) {
			  try {
			    // 如果是字符串，尝试解析
			    if (typeof userInfoStr === 'string') {
			      const parsed = JSON.parse(userInfoStr)
			      // 检查是否是登录响应格式
			      if (parsed.code === 200 && parsed.data) {
			        userInfo = parsed.data
			      } else {
			        userInfo = parsed
			      }
			    } else {
			      // 如果不是字符串，直接使用
			      userInfo = userInfoStr
			    }
			  } catch (e) {
			    console.error('解析用户信息失败', e)
			    // 解析失败时，尝试直接使用
			    userInfo = userInfoStr
			  }
			}
			
			// 先获取收藏记录
			uni.request({
				url: `${uni.$config.baseUrl}/technicianMember/technicianMember/list`,
				method: 'GET',
				data: {
					memberId: userInfo.memberId,
					technicianId: tech.id
				},
				success: (res) => {
					if (res.statusCode === 200 && res.data && res.data.code === 200) {
						const list = res.data.rows || []
						const collectRecord = list.find(item => item.technicianId == tech.id)
						
						if (collectRecord) {
							// 执行取消收藏
							uni.request({
								url: `${uni.$config.baseUrl}/technicianMember/technicianMember/${collectRecord.id}`,
								method: 'DELETE',
								success: (res) => {
									if (res.statusCode === 200 && res.data && res.data.code === 200) {
										uni.showToast({
											title: '取消收藏成功',
											icon: 'success'
										})
										// 从列表中移除该技师
										this.technicianList = this.technicianList.filter(item => item.id !== tech.id)
									} else {
										uni.showToast({
											title: res.data.msg || '取消收藏失败',
											icon: 'none'
										})
									}
								},
								fail: () => {
									uni.showToast({
										title: '网络请求失败',
										icon: 'none'
									})
								}
							})
						}
					}
				}
			})
		}
	}
}
</script>

<style lang="scss">
.technician-collect {
	min-height: 100vh;
	background-color: #F8F8F8;
	padding: 20rpx;
	
	.back-button {
		position: fixed;
		top: 40rpx;
		left: 20rpx;
		z-index: 100;
		width: 80rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		
		.iconfont {
			font-size: 48rpx;
			color: #333;
		}
	}
	
	.technician-list {
		.technician-item {
			background-color: #FFFFFF;
			border-radius: 12rpx;
			margin-bottom: 20rpx;
			padding: 30rpx;
			display: flex;
			
			.avatar-container {
				width: 120rpx;
				height: 120rpx;
				margin-right: 30rpx;
				
				.avatar {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
			
			.info-container {
				flex: 1;
				
				.header {
					display: flex;
					justify-content: space-between;
					align-items: flex-start;
					margin-bottom: 20rpx;
					
					.name {
						font-size: 32rpx;
						font-weight: 500;
						color: #333;
					}
					
					.button-group {
						display: flex;
						flex-direction: column;
						gap: 10rpx;
						
						.collect-btn {
							background-color: #2B87FF;
							padding: 8rpx 24rpx;
							border-radius: 30rpx;
							
							text {
								font-size: 24rpx;
								color: #FFFFFF;
							}
						}
						
						.uncollect-btn {
							background-color: #F5F5F5;
							padding: 8rpx 24rpx;
							border-radius: 30rpx;
							
							text {
								font-size: 24rpx;
								color: #666;
							}
							
							&:active {
								opacity: 0.8;
							}
						}
					}
				}
				
				.store-info,
				.experience {
					font-size: 26rpx;
					color: #666;
					margin-bottom: 12rpx;
				}
				
				.rating {
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;
					
					text {
						font-size: 26rpx;
						color: #666;
					}
					
					.stars {
						display: flex;
						
						.star {
							font-size: 26rpx;
							color: #FFB800;
							margin-right: 4rpx;
							
						}
					}
				}
				
				.tags {
					display: flex;
					flex-wrap: wrap;
					margin-bottom: 20rpx;
					
					.tag {
						background-color: #F5F5F5;
						padding: 6rpx 20rpx;
						border-radius: 6rpx;
						margin-right: 16rpx;
						margin-bottom: 12rpx;
						
						font-size: 24rpx;
						color: #666;
					}
				}
				
				.view-intro {
					text-align: right;
					
					text {
						font-size: 26rpx;
						color: #2B87FF;
						padding: 10rpx 0;
					}
				}
			}
		}
		
		.no-data {
			text-align: center;
			padding: 60rpx 0;
			color: #999;
			font-size: 28rpx;
		}
	}
}
</style> 